<template>
    <div>
      
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
        <div>
          <!--    功能区-->
          <div style="margin: 10px 0">
            <!--    搜索区-->
            <div style="margin: 10px 0">
                <div style="margin-bottom: 10px;">  
                    <span style="margin-right: 20px;">查询是否已处理的订单</span> 
                 <el-radio-group v-model="form.isFinish">
                   <el-radio label="1">已处理</el-radio>
                   <el-radio label="0">未处理</el-radio>
                </el-radio-group>
                  
                </div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" >
                    <el-form-item label="查询条件">
                            <el-select v-model="formInline.type" placeholder="选择查询条件">
                            <el-option label="学生姓名" value="stuName"></el-option>
                            <el-option label="房间号" value="roomId"></el-option>
                            <el-option label="审核状态" value="rpStatus"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="查询内容">
                            <el-input  v-if="formInline.type==null" v-model.trim="form.stuName" placeholder="请选择查询左侧查询条件！" ></el-input>
                            <el-input  v-if="formInline.type==='stuName' " v-model.trim="form.stuName" placeholder="请填写名字" prop="stuId"></el-input>
                            <el-input  v-if="formInline.type==='roomId' " v-model.trim="form.roomId" placeholder="请填写房间号" prop="stuName"></el-input>
                            <el-input  v-if="formInline.type==='rpStatus' " v-model.trim="form.rpStatus" placeholder="请填写1或0" prop="rpStatus"></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="load">查询</el-button>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>


            </el-form>
            </div>
          </div>
          <!--    表格-->
          <el-table v-loading="loading" :data="tableData"  max-height="1000" style="width: 100%">
            <el-table-column label="#" type="index"/>
            <el-table-column label="单号" prop="rpId"/>
            <el-table-column label="楼栋号" prop="ldId"/>
            <el-table-column label="房间号" prop="roomId"/>
            <el-table-column label="申请人姓名" prop="stuName"> 
            </el-table-column>
            <el-table-column label="故障物品" prop="rpItem"/>
            <el-table-column label="故障原因" prop="rpReason"/>
            <el-table-column label="申请时间" prop="rpDate"/>
            <el-table-column label="审核状态" prop="rpStatus" :formatter="parseStatus"/>
            <el-table-column label="是否已处理" prop="isFinish" :formatter="parseFinish"/>
            <!--      操作栏-->
            <el-table-column label="操作" width="150px" >
                <template slot-scope="scope">
                    <el-button v-if = "!scope.row.rpStatus"
                    size="mini"
                    type="danger"
                    @click="handleEdit(scope.row)">通知维修</el-button>
                <el-tag v-if = "scope.row.rpStatus" type="success">已查阅通知</el-tag>
            </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div style="margin: 10px 0">
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </template>
<script>
import request from '@/utils/request'
export default {
    name: "notdeal",
    data() {
        return {
            loading: true,
            searchFinish:-1,
            search: null,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [
                {
                    rpId:null,
                    stuName:null,
                    ldId:null,
                    roomId:null,
                    rpItem:null,
                    rpReason:null,
                    rpStatus:null,
                    rpDate:null,
                    isFinish:null
                }
            ],
            form:{
                    stuName:null,
                    ldId:null,
                    roomId:null,
                    rpItem:null,
                    rpReason:null,
                    rpStatus:null,
                    rpDate:null,
                    isFinish:null
            },
            formInline:{
                type:null
            },
            editDisplay: {
                display: "block",
            },
            display: {
                display: "none",
            },
        };
    },
    created() {
        this.load();
        this.loading = true;
        setTimeout(() => {
            //设置延迟执行
            this.loading = false;
        }, 1000);
    },
    methods:{
        async load(){
         console.log(this.form)
          request.get("/repair/find", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    isFinsih:this.form.isFinish,
                    stuName:this.form.stuName,
                    roomId:this.form.roomId,
                    rpStatus:this.form.rpStatus
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        parseStatus(row) {
         return row.rpStatus? '已通知' : '未通知'
        },
        parseFinish(row){
            return row.isFinish? '已完成':'未完成'
        },

        onSubmit(){
            console.log(this.form);
        },
        reset() {
            this.form = {}
            request.get("/repair/find", {
                params: {
                    pageNum: 1,
                    pageSize: this.pageSize,
                    isFinsih:this.form.isFinish,
                    stuName:this.form.stuName,  
                    roomId:this.form.roomId,
                    rpStatus:parseInt(this.form.rpStatus)
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        handleEdit(row){
                var rpParam ={
                    rpId:null,
                    stuName:null,
                    ldId:null,
                    roomId:null,
                    rpItem:null,
                    rpReason:null,
                    rpStatus:null,
                    rpDate:null,
                    isFinish:null
                }
                rpParam = JSON.parse(JSON.stringify(row));
                request.put("/repair/updateStatus",rpParam).then(res=>{
                    if(res.code === "1"){
                    this.$message({
                      type:'success',
                      message:'修改成功'
                    })
                    this.load();
                  }
                  else{
                    this.$message({
                      type:'error',
                      message:'修改失败'
                    })
                  }
                })
                
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },

    }
    

}
</script>